<template functional>
  <a-sub-menu :key="props.menuInfo.id">
    <span
      slot="title"
      :style="
        props.menuInfo.num > 0
          ? {
              color: 'orange',
            }
          : undefined
      "
    >
      <i v-if="props.menuInfo.icon" class="anticon petter">
        <app-icon :value="props.menuInfo.icon" />
      </i>

      <span>
        {{ props.menuInfo.title }}
      </span>
      <!-- <a-tag
        v-show="props.menuInfo.num > 0"
        color="#f50"
        :style="{ marginLeft: '10px' }"
      >
        {{ props.menuInfo.num }}
      </a-tag> -->
    </span>

    <template v-for="item in props.menuInfo.children">
      <a-menu-item
        v-if="item.page_type == 1 && item.status == 1"
        :key="item.id"
      >
        <template v-if="item.page_mark == 'online'">
          <a @click="() => (onlineVisible = true)">
            <i v-if="item.icon" class="anticon petter">
              <app-icon :value="item.icon" />
            </i>
            <span> {{ item.title }} </span>
          </a>
        </template>
        <router-link
          v-else
          :to="item.page_url"
          :style="
            item.num > 0
              ? {
                  color: 'orange',
                }
              : undefined
          "
        >
          <i v-if="item.icon" class="anticon petter">
            <app-icon :value="item.icon" />
          </i>
          <span> {{ item.title }} </span>
          <a-tag
            v-show="item.num > 0"
            color="#f50"
            :style="{ marginLeft: '10px' }"
          >
            {{ item.num }}
          </a-tag>
        </router-link>
      </a-menu-item>
      <SubMenu
        v-else-if="item.page_type == 0 && item.status == 1"
        :key="item.id"
        :menu-info="item"
      />
    </template>
  </a-sub-menu>
</template>

<script>
export default {
  props: {
    menuInfo: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {}
  },
  methods: {},
}
</script>

<style scoped>
.iconfont {
  margin-right: 8px;
}
.ant-menu-item .petter {
  vertical-align: 0;
}
</style>
